<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #fa {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            margin: 200px auto;
        }

        #fa>div {
            width: 33%;
            height: 33%;
            border: 1px solid black;
            float: left;
            text-align: center;
            font-size: 25px;
            font-weight: bold;
        }

        #start {
            cursor: pointer;
            background-color: pink;
        }
        .search{
            width: 250px;
            height: 40px;
            
        }
    </style>
</head>

<body>
    <input class="search" type="text">
</body>
<script>

    // 防抖处理(等上一次结束才能启动下一次)  => 此写法如果是异步 => 需要专门处理
    // 1. 等上一次结束才能启动下一次 (当前案例)
    // 2. 某一段时间内重复触发,最后一次生效

    // 一般情况下,搜索功能要和后端配合实现   
    // a. 前端给后端传入搜索的关键词 
    // b. 后端接收关键词 => 在数据库中搜索 => 返回搜索的结果
    // c. 前端获取后端返回数据 => 渲染

    // 问题: 
    // 如果搜索的频率过高, 占用服务器性能 => 防抖处理 ( 某一段时间内重复触发,最后一次生效)
    // var searchInp = document.getElementsByClassName("search")[0];

    // searchInp.oninput = function(){
    //     var key = this.value;
    //     console.log("准备搜索,关键词"+key);
    // }



    // 防抖版  ->  如果页面中同时需要做很多次防抖 timer出现多次
    // var searchInp = document.getElementsByClassName("search")[0];
    // var timer = null;
    // searchInp.oninput = function(){
    //     clearTimeout(timer); // 如果300ms内连续触发 => 先清除上一次,在启动下一次 
    //     timer = setTimeout(function(){ // 延迟300ms后开始 
    //         var key = this.value;
    //         console.log("准备搜索,关键词:"+key);  // 执行的内容 (从开始到执行 需要 300s)
    //     },300)
    // }
        
    // 自执行函数 => 将执行的结果赋值给变量a
    // var a = (function(){
    //     return 10;
    // })();


   /*  var searchInp = document.getElementsByClassName("search")[0];
    searchInp.oninput = (function(){   // 自执行函数 => 将返回的函数赋值给事件
        var timer = null;  // 减少全局变量的使用
        return function(e){  // 此函数才是赋值给事件的真正函数
            // var key = this.value;
            console.log(this);
            clearTimeout(timer); // 如果300ms内连续触发 => 先清除上一次,在启动下一次
            timer = setTimeout(function(){ // 延迟300ms后开始 
                var key = this.value; // 有问题
                console.log("准备搜索,关键词:"+key);  // 执行的内容 (从开始到执行 需要 300s)
            },300)
        }
    })() */

    // 此写法没有问题  => 但是当前仅适用于搜索功能  => 
    var searchInp = document.getElementsByClassName("search")[0];
    searchInp.oninput = (function(){   // 自执行函数 => 将返回的函数赋值给事件
        var timer = null;  // 减少全局变量的使用
        return function(e){  // 此函数才是赋值给事件的真正函数(e)
            // var key = this.value;
            console.log("this",this);
            console.log("e",this);
            clearTimeout(timer); // 如果300ms内连续触发 => 先清除上一次,在启动下一次
            timer = setTimeout(()=> { // 延迟300ms后开始 
                //  执行的内容 (从开始到执行 需要 300s)
                var key = this.value; // 有问题
                console.log("准备搜索,关键词:"+key); 
            },300)
        }
    })()
</script>

</html>